import React, { Component } from 'react'
import './index.css'
export default class Home extends Component {
    render() {
        return (
           <div id="home">
               <header>
                    <figure className="logo"></figure>
                </header>
                <section className="search-bar-wrap">
                  <section className="search-bar">
                    <aside className="search-icon"></aside>
                    <aside className="search-val">T恤</aside>
                  </section>
                </section>
                <section className="home-container">
          <div className="swiper-container">
            <img src="https://resource.smartisan.com/resource/0750ebe478af87b2799fa4fe771dbaf9.jpg?x-oss-process=image/resize,w_750/format,webp" alt=""/>
          </div>
          <section className="home-box">
              <aside className="ad-wrap-inner common-flex-box">
                <figure className="ad-cover">
                    <img src="https://resource.smartisan.com/resource/8983e641bf48a573096521716227cc5c.png?x-oss-process=image/resize,w_700/format,webp" alt="广告位图片" className="ad-poster"/>
                </figure>
              </aside>
              <aside className="list-wrap common-flex-box">
                  <section className="flex-item">
                    <figure className="item-cover">
                        <img  src="https://resource.smartisan.com/resource/f46b707ac60f2dc7e000fcbb764b8d9c.png?x-oss-process=image/format,webp" alt="商品图片"/>
                    </figure>
                    <article className="item-title">
                        <h3>落栗 卫衣 圆领 莫里斯·麦当劳诞生</h3>
                    </article>
                    <article className="item-bottom-info">
                        <aside  className="item-price">
                            <span className="yuan">¥</span>
                            <span>249</span>
                        </aside>
                    </article>
                  </section>
                  <section className="flex-item">
                    <figure className="item-cover">
                        <img  src="https://resource.smartisan.com/resource/f46b707ac60f2dc7e000fcbb764b8d9c.png?x-oss-process=image/format,webp" alt="商品图片"/>
                    </figure>
                    <article className="item-title">
                        <h3>落栗 卫衣 圆领 莫里斯·麦当劳诞生</h3>
                    </article>
                    <article className="item-bottom-info">
                        <aside  className="item-price">
                            <span className="yuan">¥</span>
                            <span>249</span>
                        </aside>
                    </article>
                  </section>
                  <section className="flex-item">
                    <figure className="item-cover">
                        <img  src="https://resource.smartisan.com/resource/f46b707ac60f2dc7e000fcbb764b8d9c.png?x-oss-process=image/format,webp" alt="商品图片"/>
                    </figure>
                    <article className="item-title">
                        <h3>落栗 卫衣 圆领 莫里斯·麦当劳诞生</h3>
                    </article>
                    <article className="item-bottom-info">
                        <aside  className="item-price">
                            <span className="yuan">¥</span>
                            <span>249</span>
                        </aside>
                    </article>
                  </section>
                  <section className="flex-item">
                    <figure className="item-cover">
                        <img  src="https://resource.smartisan.com/resource/f46b707ac60f2dc7e000fcbb764b8d9c.png?x-oss-process=image/format,webp" alt="商品图片"/>
                    </figure>
                    <article className="item-title">
                        <h3>落栗 卫衣 圆领 莫里斯·麦当劳诞生</h3>
                    </article>
                    <article className="item-bottom-info">
                        <aside  className="item-price">
                            <span className="yuan">¥</span>
                            <span>249</span>
                        </aside>
                    </article>
                  </section>
              </aside>
          </section>
           <section className="home-box">
              <aside className="ad-wrap-inner common-flex-box">
                <figure className="ad-cover">
                    <img src="https://resource.smartisan.com/resource/8983e641bf48a573096521716227cc5c.png?x-oss-process=image/resize,w_700/format,webp" alt="广告位图片" className="ad-poster"/>
                </figure>
              </aside>
              <aside className="list-wrap common-flex-box">
                  <section className="flex-item">
                    <figure className="item-cover">
                        <img  src="https://resource.smartisan.com/resource/f46b707ac60f2dc7e000fcbb764b8d9c.png?x-oss-process=image/format,webp" alt="商品图片"/>
                    </figure>
                    <article className="item-title">
                        <h3>落栗 卫衣 圆领 莫里斯·麦当劳诞生</h3>
                    </article>
                    <article className="item-bottom-info">
                        <aside  className="item-price">
                            <span className="yuan">¥</span>
                            <span>249</span>
                        </aside>
                    </article>
                  </section>
                  <section className="flex-item">
                    <figure className="item-cover">
                        <img  src="https://resource.smartisan.com/resource/f46b707ac60f2dc7e000fcbb764b8d9c.png?x-oss-process=image/format,webp" alt="商品图片"/>
                    </figure>
                    <article className="item-title">
                        <h3>落栗 卫衣 圆领 莫里斯·麦当劳诞生</h3>
                    </article>
                    <article className="item-bottom-info">
                        <aside  className="item-price">
                            <span className="yuan">¥</span>
                            <span>249</span>
                        </aside>
                    </article>
                  </section>
                  <section className="flex-item">
                    <figure className="item-cover">
                        <img  src="https://resource.smartisan.com/resource/f46b707ac60f2dc7e000fcbb764b8d9c.png?x-oss-process=image/format,webp" alt="商品图片"/>
                    </figure>
                    <article className="item-title">
                        <h3>落栗 卫衣 圆领 莫里斯·麦当劳诞生</h3>
                    </article>
                    <article className="item-bottom-info">
                        <aside  className="item-price">
                            <span className="yuan">¥</span>
                            <span>249</span>
                        </aside>
                    </article>
                  </section>
                  <section className="flex-item">
                    <figure className="item-cover">
                        <img  src="https://resource.smartisan.com/resource/f46b707ac60f2dc7e000fcbb764b8d9c.png?x-oss-process=image/format,webp" alt="商品图片"/>
                    </figure>
                    <article className="item-title">
                        <h3>落栗 卫衣 圆领 莫里斯·麦当劳诞生</h3>
                    </article>
                    <article className="item-bottom-info">
                        <aside  className="item-price">
                            <span className="yuan">¥</span>
                            <span>249</span>
                        </aside>
                    </article>
                  </section>
              </aside>
          </section>
      </section>
           </div>   
        )
    }
}
